import {useLocation} from "react-router";
import {useProject} from "../../utils/project";
import {useUrlQueryParam} from "../../utils/url";
import {useCallback, useMemo} from "react";
import {useTask} from "../../utils/task";
import {useDebounce} from "../../utils";

export const useProjectIdInUrl = () => {
    const {pathname} = useLocation()
    const id = pathname.match(/projects\/(\d+)/)?.[1]
    return Number(id)
}

export const useProjectInUrl = () => useProject(useProjectIdInUrl())

export const useKanbanSearchParams = () => ({projectId: useProjectIdInUrl()})


export const useTasksSearchParams = () => {
    const [param, setParam] = useUrlQueryParam([
        "name",
        "typeId",
        "processorId",
        "tagId",
    ]);
    const projectId = useProjectIdInUrl();
    // const debouncedName = useDebounce(param.name, 200);
    return useMemo(
        () => ({
            projectId,
            typeId: Number(param.typeId) || undefined,
            processorId: Number(param.processorId) || undefined,
            tagId: Number(param.tagId) || undefined,
            name: param.name,
        }),
        [projectId, param]
    );
};

export const useKanbansQueryKey = () => ['kanbans', useKanbanSearchParams()]


export const useTasksQueryKey = () => ['tasks', useTasksSearchParams()]

export const useTasksModal = () => {
    const [{editingTaskId}, setEditingTaskId] = useUrlQueryParam(['editingTaskId'])
    const {data: editingTask, isLoading} = useTask(Number(editingTaskId))
    const startEdit = useCallback((id: number) => {
        setEditingTaskId({editingTaskId: id})
    }, [setEditingTaskId])
    const close = useCallback(() => {
        setEditingTaskId({editingTaskId: ''})
    }, [setEditingTaskId])
    return {
        editingTaskId,
        editingTask,
        startEdit,
        close,
        isLoading
    }
}
